import React, { useCallback, useMemo, useState } from 'react'
import One from './02_One';
import Test from './07_Test';
import Button from './08_Button';

export default function DiffCom() {
  //声明一个状态
  let [count, setCount] = useState(0);
  let [arr, setArr] = useState([1,2,3,4,5,6]);

  //useCallback 可以缓存一个回调函数 性能函数
  let fn = useCallback(() => {
    setCount(count => count + 1);
  }, []);

  //useMemo
  let result = useMemo(() => {
    console.log('run ...');
    return arr.reduce((prev, cur) => prev + cur);
  }, [arr]);

  return (
    <div style={{padding: 40}}>
      <h2>{count}</h2>
      <Button onClick={fn}></Button>
      <hr />
      <h2>{result}</h2>
      <button onClick={() => {
        setArr([...arr, 10])
      }}>新增</button>
    </div>
  )
}
